@import "~taro-ui/dist/style/components/flex.scss";
@import "~taro-ui/dist/style/components/tabs.scss";
@import "~taro-ui/dist/style/components/float-layout.scss";

page {
    // background: #f4f4f4;
    background: white;
    min-height: 100%;
}
.order-record {
    background: #f4f4f4;
    padding-top: 80px;

    .no-record-wrap {
        padding-top: 210px;
        padding-bottom: 37px;
        height: 100%;
        text-align: center;
        image {
            width: 137px;
            height: 134px;
        }
        .increase-goods-btn {
            margin: 37px 188px;
            border-radius: 66px;
            border: 2px solid #cc9656;
            text-align: center;
            padding-top: 24px;
            padding-bottom: 24px;
            color: #cc9656;
        }
    }

    .record-wrap {
        padding: 25px;
        .lf-wrap {
            padding-top: 30px;
            padding-bottom: 30px;
            display: flex;
            flex-direction: row;
            width: 100%;
            line-height: 70px;
            &-recommend-left {
                flex: 1;
                // position: relative;
                display: flex;
                flex-direction: row;
                align-items: center;
                height: 112px;
                .recommend-scroll {
                    width: 100%;
                    height: 100%;
                    white-space: nowrap;
                    overflow: hidden;
                    .recommend-list {
                        .recommend-item {
                            display: inline-block;
                            width: 112px;

                            image {
                                width: 112px;
                                height: 112px;
                                border-radius: 12px;
                            }

                            &:nth-child(n+2) {
                                margin-left: 20px;
                            }
                        }
                    }
                }
            }

            &-recommend-right {
                width: 110px;
                flex: initial;
                display: flex;
                flex-direction: row;
                align-items: center;
                font-size: 28px;
                color: #5E5D5D;
                text-align: right;
                justify-content: flex-end;

            }
            &-goods-left {
                width: 112px;
                text-align: left;
                font-size: 32px;
                color: #333;
                image {
                    width: 112px;
                    height: 112px;
                    border-radius: 12px;
                    vertical-align: top;
                }
            }
            &-goods-right {
                padding-left: 20px;
                line-height: 40px;
                flex: 1;
                .goods-name {
                    font-size: 26px;;
                }
                .text-price {
                    color: #cc9656;
                    font-size: 30px;
                    font-weight: bold;
                    margin-top: 12px;
                    position: relative;
                    image {
                        width:24px;
                        height:24px;
                        margin-left: 10px;
                    }
                    .price-symbol {
                        font-size: 20px;
                    }
                    .goods-nums {
                        color: #979797;
                        font-size: 30px;
                        display: inline-block;
                        margin-left: 34px;
                        font-weight: 300;
                        position: absolute;
                        right: 20px;
                    }
                }
            }
            .no-pic {
                padding-left: 0px;
                padding-bottom: 20px;
            }
        }
        .item {
            background: white;
            margin-bottom: 20px;
            box-sizing: border-box;
            padding-left: 25px;
            padding-right: 25px;
            padding-top: 36px;
            padding-bottom: 36px;
            border-radius: 17px;
            .row-wrap {
                box-sizing: border-box;
                padding-top: 20px;
                .title {
                    display: inline-block;
                    font-size: 32px;
                    color: #333333;
                    letter-spacing: 2px;
                    margin-right: 10px;
                }
            }
            .right-btns {
                text-align: right;
                margin-top: 10px;
                margin-bottom: 20px;
                .action-btn {
                    display: inline-block;
                    border-radius: 66px;
                    border: 2px solid #cc9656;
                    text-align: center;
                    padding: 8px 14px;
                    font-size: 26px;
                    letter-spacing: 3px;
                    color: #cc9656;
                    background: #fdf6f0;
                    min-width: 120px;
                    &-white {
                        color: #cc9656;
                        background: #ffffff;
                    }
                    &:not(:first-child) {
                        margin-left: 20px;
                    }
                }
            }
            .title-wrap {
                border-bottom: 1px solid #f7f7f7;
                padding-bottom: 36px;
                .title {
                    font-size: 30px;
                    color: #333333;
                    letter-spacing: 2px;
                }
                .right-value {
                    font-size: 26px;
                    color: #cc9656;
                    letter-spacing: 2px;
                    text-align: right;
                }
                image {
                    width: 36px;
                    height: 35px;
                    position: relative;
                    top: 2px;
                }
            }
            .time-wrap {
                border-top: 1px solid #f7f7f7;
                padding-top: 24px;
                font-size: 26px;
                color: #999;
            }
        }
    }
    
}

.bg-white {
}

.at-tabs {
    position: fixed;
    width: 100%;
    top: 0px;
    z-index: 99;
    height: 84px;
    &__item {
        color: #5E5D5D;
        &--active {
            color: #52D5AA;
        }
        &-underline {
            width: 64px;
            margin: 0px auto;
            right: 0;
            bottom: 0px;
            height: 6px;
            background: #52D5AA;
            border-radius: 2px;
        
        }
    }
    border-bottom: 2px solid #F3F4F5;
}